Holistic Portability, part 1: Designing Templates for all devices
right|200px|thumb|Schritt 1: Du hast eine tolle Idee für eine Vorlage in deinem Wiki |right|200px|thumb|Schritt 2: Du versuchst alle Codes und Klammern richtig zu setzen... right|200px|thumb|Schritt 3: ...und verzweifelst, weil die Vorlage auf der mobilen Ansicht nicht sichtbar ist, weil sie dein Rechner sie hasst. Vorlagen sind mehr als nur Infoboxen und es gibt mehr als genug Arten von Infoboxen. Jedoch sind einige Vorlagen portabler als andere und darum ist es wichtig für die Zukunft deine Community portabel-sicher zu gestalten. Als ein Teil der Zukunftssicherheit sollten unseren gesamten Communities auf jeder Plattform gesehen werden können. Dies ist die [[w:c:de.portability:Einführung in die Portabilität|'Essenz von Portabilität']]. Viele Benutzer denken meistens nur daran, wie eine Seite auf ihrem Desktop aussehen würde und nicht, wie sie auf anderen Geräten (besonders noch kleineren Bildschirmen) erscheinen. Die wirklichen Vorteile erscheinen erst in der Zukunft, wenn kluge Geräte oder auch die virtuelle Realität an der Tagesordnung stehen werden. In der Serie der Artikel geht es darum dein gesamtes Wikia portabler zu gestalten. Dies ist ein Musterbeispiel, denn wir präsentieren dir die besten Methoden, um deine Inhalte für die Zukunft zugänglicher zu gestalten. Checklist: Ge- und Verbote Die meisten dieser Gebote und Verbote werden auf den mobilen Skin deines Wikis zutreffen. Tablets mögen vielleicht ein wenig nachsichtiger sein, zeigen jedoch aber auch die gleichen Probleme wie bei Handys. Mobilgeräte (unter Wikias "Mercury"-Skin) können vieles in vielerlei Formen, wie zum Beispiel den Community Apps, den Content anzeigen. Don'ts * Inline-Styling mit CSS wird nicht überall funktionieren. Warum du auf Inline-Styling verzichten solltest wird dir im Portability Wiki erklärt. * class = ist nicht immer in HTML-Tags im mobilen Skin mit einbezogen. * Das colspan = und rowspan = in Tabellen wird als nicht-portabel angesehen. Die ersten zwei Punkte der Don'ts sind dafür da, die Präsentation von den Inhalten organisatorisch zu trennen. Für die Zukunft sind die Ergebnisse der beiden Tools jedoch nicht vielversprechend, denn sie werden auf den unterschiedlichen Browsern anders angezeigt. Der Grund für den dritten Punkt ist, dass Tabellen dafür bekannt sind ihre Probleme mit ihrer Portabilität (wie zum Beispiel der Inflexibilität der Skalierung auf kleineren Bildschirmen oder anderen Web-Browsern) zu zeigen. Do's * [[w:c:de.portability:Mobile Hauptseiten|'Betreue Hauptseiten']] für die mobile Ansicht. Dies ersetzt Special:Promote und Special:CuratedContent. Die Idee dahinter ist, dass deine Hauptseite auf allen Geräten organisiert und gut strukturiert aussieht und sie auf die nötigen und wichtigen Artikel oder Blogbeiträgen verlinkt ist. Jeder Artikel, der kategorisiert ist, sollte somit mit der mobile Hauptseite für den Leser aufrufbar sein. * Benutze class= hidden um etwas in der mobilen Ansicht zu verstecken. Wenn du etwas in der mobilen Ansicht unbedingt verstecken musst, dann ist dies eine Möglichkeit. Jedoch sollte man sich erfragen, weshalb man es verstecken muss. Gestaltet man die zu versteckenden Inhalte portabel, so hast du womöglich weniger Arbeit vor dir und kannst es bei anderen Inhalten ebenfalls anwenden. Die mobile Hauptseite des Game of Thrones Wikis: Game of Thrones Mobile Hauptseite 1.png Game of Thrones Mobile Hauptseite 2.png Game of Thrones Mobile Hauptseite 3.png * Klassifiziere deine Vorlagen. Durch diesen Weg werden die Inhalte der Vorlage besser interpretiert. Derzeit werden Vorlagen in Navbox und auch in der Kategorie Navigation nicht angezeigt, wenn es um die Portabilität in deinem Wiki sich dreht. Wenn es jedoch um andere Geräte geht, steht die Navigation auf einem anderen Blatt geschrieben. Die Navigation durch das Wiki sollte optional durch die mobile Hauptseite erfolgen. * Beachte, dass du nicht der einzige Benutzer bist, der einen Blick auf die Portabilität des Wikias werfen wirst. Hinterlasse deswegen eine gute Dokumentation! thumb|center|350px|Kurze und knappe Dokumentation der CSS im [[w:c:de.warrior-cats|Warrior Cats Wiki]] Trenne Inhalte von seiner Präsentation Dies ist ein Thema, das Vorlagen zukunftssicher gestaltet. Die Seite beinhaltet Informationen, die in einem Text oder Medien verpackt sind, jedoch ist das Aussehen (Zum Beispiel durch style = "color:green") und die Präsentation der Seite entscheidend. Die Priorität sollte aber immer auf den Inhalt des Artikels liegen und nicht auf dem Design. Manchmal gestaltest du eine Seite nach deinen eigenen Plänen, doch nicht jeder sieht die Seite so, wie du es dir vorgestellt hattest. Ein Beispiel dafür ist die Zugänglichkeit deines Wikias von Lesern mit Behinderung wie zum Beispiel für Farbenblinde oder blinde Menschen, die den Aufwand des Designs gar nicht wahrnehmen können. Ein weiteres Beispiel sind die intelligenten Assistenten wie Siri, Google New oder Alexa, die nicht interpretieren können, was du ausdrücken möchtest und somit die Übertragung zum Leser fehlschlägt. Vorlagen-"Inception" Ein populärer Weg das Design in einem Vorlage einzubringen ist es sie in anderen Vorlagen einzufügen und sie wiederum in die originale Infobox zu verpacken. Während dies in der Vergangenheit ein ziemlich hilfreiches Mittel war die Infoboxen zu gestalten, ist es jedoch für die Zukunft der Portabilität schädlich. Es fängt allein damit an, dass es schwierig ist, die Infoboxen zu archivieren. Portable Infoboxen sollten nicht andere Vorlagen mit längeren Elementen aufrufen. Kleine Vorlagen, die zwischen den Zeilen sich befinden sind okay. Diese Baukastenweise existiert jedoch nicht nur bei Infoboxen, sondern auch bei zahlreichen anderen Vorlagentypen. Um eine Vorlagen-"Inception" aufzulösen muss man den aller kleinsten Baustein betrachten und dann sich von innen nach außen vorarbeiten. Da alle Vorlagen wie mehrere Layer aufeinander aufgebaut sind und bei der Zerlegung viele kleine Bugs entstehen können, kann das Problem meistens nur behoben werden, wenn die Vorlage komplett neu und ohne weitere Layer erstellt wird. Vorlagen fürs Auge Wikitext hat viele nützliche Funktionen, die schon länger bestehen. Eines der Gängigsten ist es Texte fett oder kursiv erscheinen zu lassen. Wenn ihr jedoch "style = font-weight: bolder;" in einer Vorlage verwendet, so ist dies nicht all zu effektiv. Also ist es, sofern möglich, besser, wenn ihr die bisher schon etablierten Funktionen benutzt. Wenn ihr eine Vorlage mit jeglichem Wikitext und Inlinestyling füttert, so verliert ein Benutzer schnell den Überblick und der Code wirkt sperrig und verwirrend. Zum Beispiel gibt es anstelle von Texte oder Texte. Dies spart vielleicht einige Tastendrücke, aber unnötiger Ballast wird vermieden. An einigen Stellen es aber leider nicht möglich etwas zu ändern, ohne dafür das CSS zu verwenden. Das Inlinestyling mag zwar eine Schnellspur-Methode sein, doch es lässt die Inhalte weniger portabel erscheinen. Die Lösung liegt im CSS, denn durch dies lässt sich ein Design auf mehrere Infoboxen mit einer Klasse anwenden. Es ist in Ordnung kurzzeitig in Vorlagen integriertes CSS zu benutzen, um einige Schnelltests zu durchlaufen, jedoch solltest du alles Design auf MediaWiki:Wikia.css verfrachten und speichern. Du kannst die CSS-Codes auch in deiner persönlichen Seite (Special:MyPage/wikia.css) speichern und dir ansehen, wie das Design auf jeder beliebigen Seite auftaucht. Eine der häufigsten Diskussionen zu dem gesamten Thema ist der Wikipedialink ( Vs. Label). Auch wenn der Link vielleicht ein spezielles Design besitzt wie ein Icon das an den Link gebunden ist, so wird die Vorlage deutlich portabler, wenn ihr das Ganze mit Wikia.css gestaltet. Unausgewogene Vorlagen - Die "LEGO-Blöcke" Einige Wikis überschneiden Teile der Tabellen oder Teile der Dokumente. Diese sind sehr schwer zu klassifizieren, denn sofern alle Puzzleteile beisammen sind, wird die Vorlage erst dann ordnungsgemäß angezeigt. Versuche diese Art von Vorlagen nach Möglichkeit zu vermeiden. Dieser Typ von aufgeteilten LEGO-Vorlagen ist ein unportabler Übeltäter und die Vorlage und dessen gesamter Inhalt wird durch seine atypische Weise womöglich auf der Artikelseite nicht richtig angezeigt werden. In der Tat ist eine Tabelle in einer Vorlage im Allgemeinen nicht portabel. Vorlagen sind immer noch besser als geschlossene und eigenständige Systeme, als in mehreren Stücken aufgeteilt zu sein. In vielen Wikias gibt es immer noch das Paradebeispiel, das individuelle Infoboxen als "Infobox Komponente A" oder "Infobox Komponente B" bezeichnet werden, die aber vom System als eine vollständige Infobox anerkannt wird. JavaScript thumb|right|300px|Tooltipps im [[w:c:de.leagueoflegends.wikia|League of Legends Wiki]] JavaScript ist schlicht und einfach nicht portabel. Viele mobile Gräte und auch Desktop-Browser deaktivieren es und unterstützen nur bestimmte Anpassungen. Zum Beispiel erscheinen die "Tooltips" nicht auf der mobilen Version, da sie einen Cursor benötigen, der über ihnen schwebt. Es gibt einige CSS-Lösungen, die weitaus freundlicher als das JavaScript sind und die über einem Satz oder Bild schwebende Eigenschaft wie die der Maus besitzen. Das ist technisch akzeptabel, aber nicht immer praktisch. Wenn du JavaScript für etwas benutzen musst, dann versichere dich, dass beim Ausschalten der Funktion dein Wiki nicht zusammenbricht oder es katastrophal erscheint, wenn es Benutzer auf mobilen Geräten betrachten. Schlusswort Versuche immer die Inhalte von ihrem Design und wie sie auf den Seiten dargestellt werden zu trennen. Dies erleichtert die zukünftigen Veränderungen. Versuche das Styling einfach und schlicht und portabel-freundlich zu halten. Wenn du eine Vorlage erstellst, dann achte darauf, dass sie flexibel sein müssen, um sich besser an die Bildschirmgröße und an den "article flow" anzupassen. Die Community rund um die Portabilität ist jederzeit für dich da Fragen zu beantworten und dir Tipps und Tricks auf den Weg mit zu geben.